<template>
 <div>
   <textarea v-model="msg" class="sql_textarea">{{ msg }}</textarea>
   <button class="sql_button" v-on:click="execute">执行</button>&nbsp;&nbsp;
   <button class="sql_button" v-on:click="displayReport">生成图表展示</button>
   <textarea v-model="result"  class="sql_textarea2">{{ result }}</textarea>
  </div>
</template>

<script>
import axios from 'axios'
// import CHART_DATA from '../data'
axios.defaults.baseURL = 'http://localhost:8888/api/'
axios.defaults.headers.common['token'] = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHQiOjE1MTI5ODI2Mzk2NTUsInVpZCI6ImFkbWluIiwiaWF0IjoxNTEyODk2MjM5NjU1fQ.K0Eq5pM9v2OuPdTc_tYpSgzo8jIhNqTwLEj7k7p1W9U'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

export default {
  name: 'SqlExecute',
  props: ['index'],
  data () {
    return {
      msg: 'select * from safety.scjydwjbxx limit 1',
      result: 'click me',
      chartData: [],
      type: null,
      childData: []
    }
  },
  methods: {
    execute: function () {
      axios({
        method: 'post',
        url: 'dynamicSqlExecute/getMultiColumns',
        data: {
          sql: this.msg
        }
      }).then(response => {
//        debugger
        this.result = JSON.stringify(response.data, null, 4)
//        console.log(this.result)
      }).catch(error => {
        console.log(error)
      })
    },
    displayReport: function () {
      var result = null
      try {
        result = JSON.parse(this.result)
      } catch (error) {
        console.log('error:' + error)
        return
      }
      if (result.data) {
        debugger
        this.childData = {
          columns: Object.keys(result.data[0]),
          rows: result.data
        }
        this.$emit('childEvent', {childData: this.childData, index: this.index})
      }
    }
  }
}
</script>

<style>
.sql_textarea{
  margin: 0px; width: 395px; height: 26px;
 }
.sql_textarea2{
  margin: 0px;
  height: 75px;
  width: 395px;
 }
.sql_button{
  padding: 4px 10px 5px 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #fff;
  background-color: #3379b5;
  border-color: #2a6496;
}
</style>
